<template>
  <Header :info="state.info" />
  <Reward :reward="state.reward" />
  <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" />
  <Quantity :mid="state.mid" :type="state.info.activity_type" />
  <Statistics :chart="state.chart" :type="state.info.activity_type" @submit="getData" @export='exportStat' />
</template>

<script setup lang="ts">
  import Header from './components/Header.vue'
  import Reward from './components/Reward.vue'
  import Quantity from './components/Quantity.vue'
  import Statistics from './components/Statistics.vue'
  import { fissionStats, exportData } from '@/api/smartMarketing/fissionDrainage'
  import { ref, reactive, onMounted, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import { downFile, getDay } from '@/utils/utils'
  import { number } from 'echarts'
  import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'

  const route = useRoute()
  const params = reactive({
    activity_id: route.query.id,
    effect_time: [getDay(-6), getDay(0, true)],
    type: 1
  })
  const state: any = ref({
    info: {
      activity_name: '',
      period_type: 1,
      created_at: '',
      real_end_date: null,
      created_user: '',
      status_name: '',
      effect_time: ['', ''],
      last_update_time: ''
    },
    reward: [
      {
        step: 1,
        title: '',
        help_num: 0
      }
    ],
    mid: {
      participate_num: 0,
      lost_num: 0,
      finish_num: 0,
      retain: 0
    },
    chart: {
      num: [],
      time: []
    }
  })
  const statisOptions = reactive([
    {
      label: '时间筛选',
      type: 'dateFilter'
    },
  ])
  
  const onSubmit = (data:any) => {
     params.effect_time = data.times || []
    nextTick(() => {
      if(data.times) {
        getData()
      }
    })
  }

  const getData = (data?: any) => {
    if (data) {
      if (typeof data == 'number') {
        params.type = data
      } else {
        params.effect_time = data
      }
    }
    console.log('查询参数', params)
    fissionStats(params).then((res: any) => {
      console.log('列表数据', res)
      state.value.info = res.info
      state.value.reward = res.reward
      state.value.mid = res.mid
      state.value.chart.time = []
      state.value.chart.num = []
      res.chart.forEach((item: any) => {
        state.value.chart.time.push(item.time)
        state.value.chart.num.push(item.num)
      })
    })
  }
  const exportStat = (data:any) => {
    exportData(params).then((res:any) => {
      console.log(res, 'url')
      window.location.href = res.file_url
    })
  }
</script>

<style lang="scss" scoped>
  .search_box {
    margin-bottom: 15px;
  }
</style>
